<template>
    <div class="payMessage">
        <el-container>
            <el-aside width="25%">
                <conAaside @handleAside="handleAside"></conAaside>
            </el-aside>
            <el-main>
                <div class="header">
                    <span class="list-title">缴费列表</span>
                    <el-button type="primary" size="middle" @click="handleExport">导出</el-button>
                </div>
                <el-table :data="tableData" border :header-cell-style="{
                    'background-color': 'rgb(238, 241, 246)', 'color': 'rgb(31, 45, 61)'
                }">
                    <el-table-column prop=" payname" label="缴费产品">
                        <template slot-scope="scope">
                            <span>{{ scope.row.payname === null ? '暂无' : scope.row.payname }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="username" label="缴费人员" width="180">
                        <template slot-scope="scope">
                            <span>{{ scope.row.username === null ? '暂无' : scope.row.username }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="paystatus" label="支付类型">
                        <template slot-scope="scope">
                            <span>{{ scope.row.paystatus === null ? '暂无' : scope.row.paystatus }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="paymoney" label="缴费金额">
                        <template slot-scope="scope">
                            <span>{{ scope.row.paylevel === null ? '暂无' : scope.row.paylevel }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="paylevel" label="缴费优先级">
                        <template slot-scope="scope">
                            <span>{{ scope.row.paylevel === null ? '暂无' : scope.row.paylevel }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="costtime" label="支付时间">
                        <template slot-scope="scope">
                            <span>{{ scope.row.costtime === null ? '暂无' : scope.row.costtime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="coststatus" label="支付状态">
                        <template slot-scope="scope">
                            <span>{{ scope.row.coststatus === 1 ? '已支付' : '未支付' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="210px">
                        <template slot-scope="scope">
                            <el-button type="primary" plain size="mini" @click="handleView(scope.row)">查看</el-button>
                            <el-button type="primary" plain size="mini" @click="handleExport">导出</el-button>
                            <el-button type="primary" plain size="mini" @click="delList(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <Pagination :total="total" @SizeChange="changeCount" @CurrentChange="changePage">
                </Pagination>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import conAaside from './aside'
import Pagination from '@/components/Pagination/Pagination'
export default {
    components: {
        conAaside,
        Pagination
    },
    created() {
        this.getList()
    },
    data() {
        return {
            total: 0,
            form: { currPage: 0, pageNum: 10 },
            tableData: []
        }
    },
    methods: {
        async getList() {
            await this.$Axios({
                url: '/cost/getPayMessage',
                method: 'get',
                data: this.form,
                success: ((res) => {
                    this.tableData = res.data
                    this.total = res.total
                })
            })
        },
        //删除接口
        delList(val) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axiosToken({
                    url: '/cost/delCostData',
                    method: 'get',
                    data: { id: val.id },
                    success: ((res) => {
                        this.getList()
                        this.$message.success('删除成功')
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleAside(val) {
            this.form = { ...val, ...this.form }
            this.getList()
            this.form = { currPage: 0, pageNum: 10 }
        },
        changeCount(val) {
            this.form.pageNum = val
            this.getList()
        },
        changePage(val) {
            this.form.currPage = val
            this.getList()
        },
        //导出按钮
        handleExport() {
            // this.downloadLoading = true
            import('@/utils/Export2Excel').then(excel => {
                const tHeader = ['缴费项目名称', '缴费项目优先级', '项目用量/时长', '项目价格', '创建时间', '通知人']
                const filterVal = ['payname', 'paylevel', 'paynum', 'paymoney', 'paytime', 'username']
                excel.export_json_to_excel2(
                    tHeader,
                    this.tableData,
                    filterVal,
                    '缴费列表存储信息'
                )
                // this.downloadLoading = false
            })
        },
        //查看按钮
        handleView(val) {
            this.$router.push({
                path: '/pay/payDetail',
                query: {
                    value: JSON.stringify(val)
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-table--fit {
    margin-top: 20px;
}

.payMessage {
    .el-container {
        display: flex;

        .el-aside {
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .2);
            border: 1px solid #ebeef5;
            width: 25%;
        }

        .el-main {
            width: 70%;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .2);
            border: 1px solid #ebeef5;
            margin: 0 0 0 20px;

            .header {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;

                .list-title {
                    font-size: 1.5em;
                    font-weight: 700;
                }
            }
        }
    }
}
</style>